<template>
    <view>
        <div class="container">
            <div style="height: 10px"></div>
            <view class="all">
                <view class="content">
                    <div class="card" v-for="item in list">
                        <div style="height: 10px"></div>
                        <div class="card-top">
                            <div style=" text-align: center">设备名称：{{ item.deviceName }}</div>
                            <div :class="item.deviceState == 1 ? 'right' : 'right1'"
                                style="width: 20%; text-align: center;border-radius: 4px;">
                                {{ item.deviceState == 1 ? "报修中" : "正常" }}
                            </div>
                        </div>
                        <div style="height: 10px"></div>
                        <u-line color="#83AF92"></u-line>
                        <div style="height: 10px"></div>
                        <div style="margin-left: 5%;font-size: 14px;">
                            <div>设备型号：{{ item.deviceModel }}</div>
                            <div style="height: 10px"></div>
                            <div>购买时间：{{ item.purchaseDate }}</div>
                            <div style="height: 10px"></div>
                        </div>
                        <u-line color="#83AF92"></u-line>
                        <div style="height: 10px"></div>
                        <div style="display: flex;align-items: center;justify-content: space-between;width: 95%;">
                            <div class="status" @click="wxHis(item)">维修记录</div>
                            <div class="statuss" @click="target(item)">
                                {{ item.repairState==0?'未修复':item.repairState==1?'已修复':'暂无' }}
                            </div>
                        </div>
                        <div style="height: 15px"></div>
                    </div>
                    <div style="height: 10px;"></div>
                </view>
            </view>
        </div>
    </view>
</template>
<script>
import { deviceList } from '../api/api';
export default {
    data() {
        return {
            navIndex: 0,
            list: [],
            list1: [],
            currentPage: '',
            role: ''
        };
    },
    methods: {
        checkIndex(index) {
            this.navIndex = index;
            console.log(index, 'index');
        },
        target(i) {
            uni.setStorageSync('deviceDetail', i)
            uni.navigateTo({ url: '/pagesExpert/index/main?flag=wx' })
        },
        wxHis(i){
            uni.setStorageSync('deviceDetail', i)
            uni.navigateTo({ url: `/pagesExpert/index/main?flag=jl` })
        }

    },
    onLoad() { },
    onShow() {
        deviceList().then(res => {
            console.log(res.data, '列表');
            if (res.data.code == 200) {
                this.list = res.data.data;
            }
        })
        this.role = uni.getStorageSync('userInfo').remark;
        var pages = getCurrentPages();
        let currentPageRoute = pages[pages.length - 1].route;
        // 根据当前页面路径设置currentPage
        this.currentPage = currentPageRoute;
        console.log(this.currentPage);
    },
};
</script>
<style lang="scss">
.container {
    height: 100vh;
    width: 100vw;
    background: #e3ede2;
    color: #1a512c;
    overflow-y: scroll;
}

.head-nav {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.activite {
    border-bottom: 2px solid #1a512c;
}

.card {
    width: 95%;
    margin-left: 2.5%;
    margin-top: 10px;
    border-radius: 10px;
    background: #b9e2c7;

    .card-top {
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 90%;
        margin-left: 5%;
    }
}

.items {
    display: flex;
    align-items: center;
    width: 90%;
    margin-left: 5%;
    justify-content: space-between;
    font-size: 14px;
}

.table {
    width: 90%;
    margin-left: 5%;
}

.status {
    color: #fff;
    background: #1b9c46;
    width: 45%;
    margin-left: 5%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    border-radius: 3px;
}

.statuss {
    color: #fff;
    background: #8db89c;
    width: 48%;
    margin-left: 5%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    border-radius: 3px;
}

.right {
    background: red;
    color: #fff;

}

.right1 {
    background: #50AB18;
    color: #fff;
}
</style>